Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
* {
	margin: 0;
}

body,
html {
	display: grid;
	place-items: center;
	height: 100%;
}

body {
	background: #5523e7;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	transition: background 0.3s ease;

&:has(h1:hover) {
		background: #e72370;
	}
}
h1 {
	--top: 42%;
	--bottom: 55%;
	font-size: 7rem;
	padding: 20px;
	line-height: 1.2;
	white-space: nowrap;
	background: linear-gradient(
			-0.5deg,
			transparent var(--top),
			red calc(var(--top) + 1px)
		),
		linear-gradient(
			180deg,
			transparent var(--bottom),
			blue calc(var(--bottom) + 0.2em)
		);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;

filter: url(#split);

&:before {
		content: "";
		background: black;
		position: absolute;
		inset: 0;
		mix-blend-mode: lighten;
		pointer-events: none;
	}
}

Frontend Forever App